<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的待办任务</span>
      </div>
      <!-- <el-form :inline="true" :model="searchForm" class="demo-form-inline">
       <el-form-item label="创建时间：">
        <el-date-picker
            v-model="dateRange"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form> -->
    </el-card>

    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom: 10px" @click="handleAdd">添加</el-button>
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="id" label="任务ID"></el-table-column>
        <el-table-column prop="name" label="任务名称"></el-table-column>
        <el-table-column prop="assignee" label="办理人呢"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作"  width="240px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              办理任务
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalCount">
      </el-pagination>

      <el-dialog title="办理任务" :visible.sync="dialogFormVisible" >
        <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="90px" inline>
         <el-form-item label="活动名称">
            <el-input v-model="saveForm.name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="渠道来源">
            <el-select v-model="saveForm.channel" placeholder="请选择渠道来源" clearable size="small" disabled>
              <el-option label="线上活动" value="0"></el-option>
              <el-option label="推广介绍" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动类型">
            <el-select v-model="saveForm.type" placeholder="请选择活动类型" clearable size="small" disabled>
              <el-option label="课程折扣" value="1"></el-option>
              <el-option label="课程代金券" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动折扣" v-if="saveForm.type==1">
            <el-input v-model="saveForm.discount" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="活动代金券" v-if="saveForm.type==2">
            <el-input v-model="saveForm.vouchers" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="saveForm.beginTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间" disabled
              style="width:205px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="saveForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间" disabled
              style="width:205px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动简介">
            <el-input type="textarea" v-model="saveForm.info" autocomplete="off" style="width:510px" disabled></el-input>
          </el-form-item>
          <el-form-item label="审核意见" prop="comment">
            <el-input type="textarea" v-model="saveForm.comment" autocomplete="off" style="width:510px"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="comments" style="width: 100%" border>
          <el-table-column prop="userId" label="批注人"></el-table-column>
          <el-table-column prop="message" label="批注内容"></el-table-column>
          <el-table-column prop="time" label="批注时间"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleSubmit('通过')">通过</el-button>
          <el-button type="primary" @click="handleSubmit('驳回')">驳回</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //任务id
      taskId:null,
      //评审意见
      comments:[],
      //查询的数据模型
      searchForm: {
        //过滤条件
        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      //分页数据模型
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
      //控制对话框显示还是隐藏
      dialogFormVisible: false,
      //新增的数据模型
      saveForm: {
        id:null,
        name:null,
        channel:null,
        info:null,
        type:null,
        discount:null,
        vouchers:null,
        beginTime:null,
        endTime:null,
        comment:null,
      },
      //验证数据模型
      rules: {
        comment: [
          { required: true, message: "请输入审核意见！", trigger: "blur" },
        ]
      },
    };
  },
  created() {
    this.doSearch();
  },
  methods: {
    //查询用户信息
    doSearch() {
      this.$axios.get("/api/workFlow/loadTask", {params:this.searchForm})
        .then((res) => {
            if (res.data.code == 200) {
                this.pageData = res.data.data
            } else {
                this.$message.error(res.data.msg);
            }
        })
        .catch((err) => {
            console.log(err);
        });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.doSearch();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.doSearch();
    },
    //清空新增表单数据
    reset () {
      this.saveForm = {
        id:null,
        name:null,
        channel:null,
        info:null,
        type:null,
        discount:null,
        vouchers:null,
        beginTime:null,
        endTime:null,
        comment:null
      };
    },
    //编辑
    handleEdit(index, row) {
      this.taskId=row.id;
      //1.清空模型数据
      this.reset();
      //2.查询要修改的数据
      this.$axios.get("/api/workFlow/loadTask/"+row.id).then((res)=>{
         if(res.data.code==200){  
            this.saveForm=res.data.data;
         }else{
            this.$message.error(res.data.msg);
         }
      }).catch((err)=>{
        console.log(err);
      })
      //查询意见
      this.$axios.get("/api/workFlow/loadComment/"+row.id)
        .then((res) => {
            if (res.data.code == 200) {
                this.comments = res.data.data
            } else {
                this.$message.error(res.data.msg);
            }
        }).catch((err) => {
            console.log(err);
        });
      //3.显示对话框
      this.dialogFormVisible=true;
    },
    //执行任务
    handleSubmit(outcome) {
      //2.查询要修改的数据
      let data={
        "taskId":this.taskId,
        "outcome":outcome,
        "businessId":this.saveForm.id,
        "comment":this.saveForm.comment
      }
      this.$axios.put("/api/workFlow/completeTask",data).then((res)=>{
        if (res.data.code == 200) {
            //1.关闭对话框
            this.dialogFormVisible = false;
            //2.友好提示
            this.$message.success(res.data.msg);
            //3.刷新表格
            this.doSearch();
        } else {
            //1.友好提示
            this.$message.error(res.data.msg);
        }
      }).catch((err)=>{
        console.log(err);
      })
      //3.显示对话框
      this.dialogFormVisible=true;
    },
  },
}
</script>

<style scoped>
</style>

